<template>
    <div class="box">
        <div class="order">
            <van-nav-bar class="nav-bar" title="标题" left-text="返回" left-arrow @click-left="back" fixed />
            collection
            <div class="order-bg"></div>
            <van-tabs v-model="value" animated @click="getdata(value)" class="order-tab" color="#0c34ba">
                <van-tab title="全部">
                    <OrderListComp :data="orderList" @confirm-receive="confirmReceive(arguments)"
                        @del-order="removeOrder(arguments)" status="0" />

                    <!--  订单组件--未封装 -->
                    <!-- <div class="order-container" v-for="(item,index) in orderList" :key="index">
                        <div class="order-content">
                            <div>{{item.oid}}</div>
                            <div class="order-item">
                                <img :src="item.smallImg" alt="item.name">
                                <div class="order-info">
                                    <div><span class="name">{{item.name}}</span>{{item.rule}}</div>
                                    <div>{{item.enname}}</div>
                                    <div><span class="price">￥{{item.price}}</span><span
                                            class="count">x{{item.count}}</span>
                                    </div>
                                </div>
                            </div>

                            <div class="total-price">
                                <div>共计2件商品</div>
                                <div class="pricetotal">合计 ￥{{item.price*item.count}}</div>
                                <div class="circular left"></div>
                                <div class="circular right"></div>
                            </div>
                        </div>
                    </div> -->

                </van-tab>
                <van-tab title="进行中">
                    <OrderListComp :data="orderList" @confirm-receive="confirmReceive(arguments)"
                        @del-order="removeOrder(arguments)" :is-receiving="true" status="1" />
                </van-tab>
                <van-tab title="已完成">
                    <OrderListComp :data="orderList" status="0" @del-order="removeOrder(arguments)" />
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>
<script>
    import '../assets/scss/Order.scss';
    import OrderListComp from "../components/OrderList.vue";
    import "../components/OrderList.scss";

    export default {
        name: 'Order',
        components: {
            OrderListComp
        },
        data() {
            return {
                value: 0,
                orderList: []
            }
        },
        created() {
            this.getdata(1);
        },
        methods: {
            text() {
                console.log(this.value);
            },
            back() {
                this.$router.go(-1);
            },
            getdata(status) {
                console.log('111=>', status);

                this.$toast.loading('加载中');

                this.axios({
                    method: 'GET',
                    url: '/findOrder',
                    params: {
                        appkey: this.appkey,
                        tokenString: localStorage.getItem('__tk'),
                        status
                    }
                }).then(result => {

                    // console.log('order getdata=>', result);
                    if (result.data.code === 70000) {
                        this.orderList = result.data.result;
                        setTimeout(() => {
                            this.$toast.clear();
                        }, 100);
                    }

                }).catch(err => {
                    console.log(err);
                })


            },

            confirmReceive(arg) {
                console.log('arg =>>', arg[0], arg[1]);

                let oid = arg[0];
                let status = arg[1];
                this.$toast.loading('加载中');

                this.axios({
                    method: 'POST',
                    url: '/receive',
                    data: {
                        appkey: this.appkey,
                        tokenString: localStorage.getItem('__tk'),
                        oid
                    }
                }).then(result => {

                    console.log('receive =>', result);
                    if (result.data.code === 80000) {

                        // 更新数据
                        this.getdata(status);

                        setTimeout(() => {
                            this.$toast.clear();
                        }, 100);
                    }


                }).catch(err => {
                    console.log(err);
                })

            },
            // 删除订单
            removeOrder(arg) {
                let oid = arg[0];
                let status = arg[1];
                this.$toast.loading('加载中');

                this.axios({
                    method: 'POST',
                    url: '/removeOrder',
                    data: {
                        appkey: this.appkey,
                        tokenString: localStorage.getItem('__tk'),
                        oid
                    }
                }).then(result => {
                    console.log('removeOrder =>', result);
                    if (result.data.code === 90000) {

                        // 更新数据
                        this.getdata(status);

                        setTimeout(() => {
                            this.$toast.clear();
                        }, 100);
                    }
                }).catch(err => {
                    console.log(err);
                })
            }

        },
    }
</script>